<template>
  <div>
    <el-form :inline="true" :model="param">
      <el-form-item label="会员账号">
        <el-input v-model="param.mobile" type="number" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请输入会员账号" clearable></el-input>
      </el-form-item>
      <el-form-item label="所属门店">
        <el-select v-model="param.shop_id" placeholder="请输入所属门店" clearable>
          <el-option v-for="item in shopList" :key="item.id" :label="item.shop_name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getDataList">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" row-key="Id" border style="width: 100%; " v-loading="tableLoading">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{(param.page - 1) * param.limit + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="order_code" align="center" label="订单号">
      </el-table-column>
      <el-table-column prop="user_mobile" align="center" label="会员账号">
      </el-table-column>
      <el-table-column prop="user_name" align="center" label="会员昵称">
      </el-table-column>
      <el-table-column prop="shop_name" align="center" label="门店名称">
      </el-table-column>
      <el-table-column prop="sales_money" align="center" label="消费金额">
      </el-table-column>
      <el-table-column prop="discount_ratio" align="center" label="打赏比例">
        <template slot-scope="scope">
          {{scope.row.discount_ratio}}%
        </template>
      </el-table-column>
      <el-table-column prop="discount_money" align="center" label="打赏金额">
      </el-table-column>
      <el-table-column prop="shop_consume_integral_able" align="center" label="打赏积分">
      </el-table-column>
      <el-table-column prop="create_time" align="center" label="上报时间">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="param.page" :page-sizes="[10, 20, 50, 100]" :page-size="param.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </div>
</template>

<script>
import affiliateMerchantApi from '@/api/affiliateMerchantApi.js'
export default {
  data () {
    return {
      param: {
        page: 1,
        limit: 10,
      },
      totalPage: 0,
      dataList: [],
      tableLoading: false,
      shopList: []
    }
  },
  created () {
    this.getShopList()
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true;
      affiliateMerchantApi.offlineorderPage(this.param).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
        this.tableLoading = false;
      })
    },
    getShopList () {
      affiliateMerchantApi.myshopsList().then(res => {
        if (res && res.data.code == 200) {
          this.shopList = res.data.list;
        }
      })
    },
    goDetail (row) {
      this.$router.push({
        name: "platformAffiliateMerchant-orderDetail",
        query: {
          id: row.id
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.param.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.param.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.param.page = 1
      this.getList()
    },
    // 重置
    reset () {
      this.param = {
        page: 1,
        limit: 10,
      }
      this.getList()
    }
  }
}
</script>

<style>
.el-form--inline .el-form-item__content {
  width: auto !important;
}
input[type='number'] {
  -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
</style>
<style lang="scss" scoped>
</style>
